<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style>
#login {
	margin:0 auto;
	width: 290px;
	height: auto;
	overflow: hidden;
	border: solid 1px #CCCCCC;
}

#login_title {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: #F60;
	text-align: center;
	color:white;
}

.line {
	width: 250px;
	height: 30px;
	line-height: 30px;
	margin-left: 20px;
	text-align: center;
	font-family: 楷体;
}

.line input {
	width: 150px;
}

.line a {
	font-size: 14px;
	color: black;
}

.line span {
	color: #F00;
}

#log_submit {
	display: block;
	width: 200px;
	height: 30px;
	margin-left: 45px;
	margin-top: 15px;
	margin-bottom: 5px;
}
</style>
</head>


<body>
	<form action="#" method="post">
		<div id="login">
			<div id="login_title">登&nbsp;录</div>

			<div class="line">
				<span id="msg"></span>
			</div>
			<div class="line">
				账号&nbsp;&nbsp; <input id="username" type="text"
					placeholder="请输入账号" />
			</div>
			<div class="line">
				密码&nbsp;&nbsp; <input id="password" type="password"
					placeholder="请输入密码" />
			</div>
			<input id="log_submit" type="button" value="登录">

		</div>
	</form>
	
	
	<!-- 引入jquery.js -->
	<script type="text/javascript" src="static/scripts/jquery.js"></script>

	<script type="text/javascript">
		$(function(){
			$("#log_submit").click(function(){
				var username = $("#username").val();
				var password = $("#password").val();
				var path = "user/login";
				/* $.post(path,{"name":username,"password":password},function(data){
					if(data.flag){
						window.location.href = data.url;
					}
					else{
						$("#msg").html(data.msg);
					}
				},"json"); */
				
				var options = {
						type:"post",
						url:path,
						data:{"name":username,"password":password},
						dataType:"json",
						beforeSend:function(){
							$("#msg").html("<img src='static/images/loading_icon.gif' alt='loading'>正在登录中，请稍后...");
						},
						complete:function(){
							
							
						},
						success:function(data){
							console.log(data);
							if(data.flag){
								window.location.href = data.url;
							}
							else{
								//alert(data.msg);
								$("#msg").html(data.msg);
							}
						}
						
				};
				
				$.ajax(options);
				
			});
			
		});
	
	</script>
</body>
</html>